// 该文件是用来配置项目的打包用的
// 模块化：AMD（提前加载模块，可以在用的时候最快速使用）、CMD(使用的时候再进行加载)

const path = require('path')

// 导入打包 html 文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 打包独立样式文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入 vue 的插件
const VueLoader = require('vue-loader/lib/plugin')
const { type } = require('os')


// 当前文件的绝对路径
// console.log('1111111', __dirname);

// 导出 webpack 的配置
module.exports = {
    // development, production 或 none
    // development: 开发环境，写代码阶段
    // production：生产环境或叫测试环境，代码已经写好了
    // 环境配置
    mode: 'development',
    // 入口配置
    // entry: './src/main.js',
    entry: {
        app: './src/main.js'
    },
    // 出口配置，配置打包之后文件的配置
    output: {
        // path 设置打包之后文件放在 dist 目录下
        // __dirname 获取当前文件所在的目录路径用的
        path: path.resolve(__dirname, 'dist'),
        // 打包之后的文件名称，[name]是 entry 中设置的 app
        // [hash:8] 随机 8 位字符
        filename: 'js/[name].[hash:8].build.js',
        // 在生成文件之前先清除掉原来打包的内容
        clean: true
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            // 如果需要配置自己的 html 文件可以在这里进行配置
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css'
        }),
        new VueLoader()
    ],
    // 加载器配置
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.(png|svg|jpe?g|gif)$/i,
                type: 'asset/resource'
            }, {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env', // js 的语法
                                '@babel/preset-react' // react 语法
                            ]
                        }
                    }
                ]
            }
        ],
    },
    // 配置服务
    devServer: {
        // 设置端口号 默认是 8080 
        port: '3000',
        // 启动项目打开浏览器
        open: true,
        // 配置代理
        proxy: [
            {
                context: ['/api'],
                target: 'http://open.douyucdn.cn',
                changeOrigin: true
            }
        ]
    },
    // 配置别名
    resolve: {
        // 配置忽略后缀名称,'.js'必须要写
        extensions: ['.vue', '.js', '.ts', '.tsx', '.jsx'],
        // 配置 @ 为 src 路径
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }

}




